export const TableList = ({ className, height, title, data, click }) => {
    return (
        <div className={`${className} TableList`} style={{ height }}>
            <div className="TableListTitle">
                {title.map(({ uuid, title, flex }) => (
                    <div key={uuid} style={{ flex }}>
                        {title}
                    </div>
                ))}
            </div>
            <div className="TableListBox">
                {data.map(item => (
                    <div key={item.uuid} onClick={() => click(item.uuid)}>
                        {title.map(({ uuid, field, flex }) => (
                            <div key={uuid} style={{ flex }}>
                                {item[field]}
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    )
}
